<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="auto"
      :rules="rules"
    >
      <el-form-item label="" prop="radio1">
        <el-radio-group v-model="dateType">
          <el-radio-button label="日"></el-radio-button>
          <el-radio-button label="周"></el-radio-button>
          <el-radio-button label="月"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      row-key="id"
      :span-method="objectSpanMethod"
      height="calc(100vh - 240px)"
      border
      style="margin-bottom: 16px"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    >
      <el-table-column
        prop="productSeriesName"
        label="产品系列"
      ></el-table-column>
      <el-table-column
        prop="productSeriesTypeName"
        label="类型"
      ></el-table-column>
      <el-table-column prop="productSpec" label="产品规格"></el-table-column>
      <el-table-column prop="lienName" label="所属产线"></el-table-column>
      <el-table-column prop="yield" label="生产数量"></el-table-column>
    </el-table>
    <!-- <div v-for="(item,index) in dataList" :key="index" :id="'myEchart'+index" style="width:100%;height:400px;margin-bottom:16px;" >
    </div> -->
  </div>
</template>

<script>
import { getLineOutputByTime } from "@/api/mes/report/lineOutput.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      dateType: "日",
      echartShowList: [],
      dataList: [],
      // 遮罩层
      loading: false,
      queryParams: {},
      tableData: [],
      year: null,
      option: {
        title: {
          text: "不齐套数",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["已生产数量", "已上线数量", "已下线数量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
        },
        yAxis: {
          type: "value",
          minInterval: 1,
        },
        series: [
          {
            name: "直流充电桩",
            type: "bar",
            data: [],
          },
        ],
      },
      myChart: null,
      rules: {},
    };
  },
  mounted() {
    // this.init()
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if(this.dataList.length){
      //   let len = this.dataList[0].capacityStatisticsDailyVoList.length
      //   if (columnIndex === 0) {
      //     if (rowIndex % len === 0) {
      //       return {
      //         rowspan: len,
      //         colspan: 1
      //       };
      //     } else {
      //       return {
      //         rowspan: 0,
      //         colspan: 0
      //       };
      //     }
      //   }
      // }
    },
    init() {
      var chartDom = document.getElementById("myEchart");
      this.myChart = echarts.init(chartDom);
    },
    formatDate(date, type = 1) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      if (type === 1) {
        return `${year}-${month}-${day}`;
      }
      if (type === 2) {
        const hours = date.getHours().toString().padStart(2, "0");
        const minutes = date.getMinutes().toString().padStart(2, "0");
        const seconds = date.getSeconds().toString().padStart(2, "0");
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
    },
    /** 查询生产报工记录列表 */
    getList() {
      this.loading = true;
      this.dataList = [];
      this.tableData = [];
      const now = new Date();
      let startDate = "";
      const endDate = this.formatDate(now, 2);
      if (this.dateType === "日") {
        startDate = this.formatDate(now) + " 00:00:00";
      } else if (this.dateType === "周") {
        const currentDay = now.getDay(); // 获取当前星期几，周日为0，周一为1，以此类推
        const diff = currentDay === 0 ? -6 : currentDay - 1; // 计算本周一与今天的差值，如果今天是周一，则差值为0
        startDate =
          this.formatDate(
            new Date(now.getTime() - diff * 24 * 60 * 60 * 1000)
          ) + " 00:00:00";
      } else if (this.dateType === "月") {
        startDate =
          this.formatDate(new Date(now.getFullYear(), now.getMonth(), 1)) +
          " 00:00:00";
      }
      const param = {
        startDate: startDate,
        endDate: endDate,
      };
      getLineOutputByTime(param).then(res => {
        this.loading = false
        let arr = (res.data && res.data.productSeriesStatisticsVoList)?res.data.productSeriesStatisticsVoList: []
        let id = 1
          arr.forEach(item => {
            item.children = []
            item.id = id++
            item.productSeriesAreaStatisticsVoList.forEach(item2 => {
              item2.productSpecStatisticsVoList.forEach(item3 => {
                let obj = JSON.parse(JSON.stringify(item3))
                obj.productSeriesName = item.productSeriesName
                obj.productSeriesTypeName = item2.productSeriesTypeName
                obj.id = id++
                item.children.push(obj)
              })
            })
          })
          console.log(1122,arr)
          this.tableData = arr
      }).catch(err => {
        this.tableData = [];
        this.loading = false
      })
    },
  },
};
</script>
